<template>
  <van-sku v-model="show.flag" :sku="sku" :goods="goods" :custom-stepper-config="customStepperConfig"
    :hide-stock="sku.hide_stock" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" ref="cartRef" />
</template>
<script>
  export default {
    props: ['show'],
    created() {},
    mounted() {
      // console.log(this.$refs.cartRef)
      // this.$refs.cartRef.price = 1000
      // this.$set(this.$refs.cartRef, 'price', 1000)
      this.buyer = localStorage.getItem('userId')
    },
    data: () => ({
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [{
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [{
                id: '1', // skuValueId：规格值 id
                name: '白色' // skuValueName：规格值名称
              },
              {
                id: '2',
                name: '红色'
              }
            ],
            largeImageMode: false //  是否展示大图模式
          },
          {
            k: '尺寸', // skuKeyName：规格类目名称
            k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [{
                id: '2', // skuValueId：规格值 id
                name: 'S' // skuValueName：规格值名称
              },
              {
                id: '2',
                name: 'M'
              },
              {
                id: '1',
                name: 'L'
              }
            ],
            largeImageMode: false //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [{
          id: 2259, // skuId
          s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
          s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
          price: 9999, // 价格（单位分）
          stock_num: 110 // 当前 sku 组合对应的库存
        }],
        price: '00.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        // messages: [{
        //   // 商品留言
        //   datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
        //   multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
        //   name: '备注', // 留言名称
        //   type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
        //   required: '0', // 是否必填 '1' 表示必填
        //   placeholder: '' // 可选值，占位文本
        // }],
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://s5.mogucdn.com/mlcdn/c45406/190119_3g6736c729b385f4g4f603d2hch25_640x960.jpg_640x960.v1cAC.70.webp'
      },
      customStepperConfig: {
        // 自定义限购文案
        // quotaText: '每次限购xxx件',
        // 自定义步进器超过限制时的回调
        // handleOverLimit: (data) => {
        //   const {
        //     action,
        //     limitType,
        //     quota,
        //     quotaUsed,
        //     startSaleNum
        //   } = data

        //   if (action === 'minus') {
        //     this.$Toast(startSaleNum > 1 ? `${startSaleNum}件起售` : '至少选择一件商品')
        //   } else if (action === 'plus') {
        //     // const { LIMIT_TYPE } = Sku.skuConstants
        //     if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
        //       let msg = `单次限购${quota}件`
        //       if (quotaUsed > 0) msg += `，你已购买${quotaUsed}`
        //       this.$Toast(msg)
        //     } else {
        //       this.$Toast('库存不够了')
        //     }
        //   }
        // },
        // 步进器变化的回调
        handleStepperChange: currentValue => {},
        // 库存
        stockNum: 1999,
        // 格式化库存
        stockFormatter: stockNum => {}
      },
      productId: '',
      productTitle: '',
      imgUrl: '',
      price: '',
      num: 1,
      money: '',
      buyer: ''
    }),
    methods: {
      onAddCartClicked() {
        this.show.flag = !(this.show.flag)
        this.postCart()
      },
      onBuyClicked() {
        this.$Toast('购买成功')
        this.show.flag = !(this.show.flag)
      },
      async postCart() {
        console.log(this.show);
        try {
          /*  const {
             data
           } = await this.$Api.apiUser.Login({
             name: this.name,
             pwd: this.pwd
           }) */
          let prams={
            'productId': this.show.data.p_id,
            'productTitle': this.show.data.p_title,
            'imgurl': this.show.url,
            'price':this.show.price,
            'num': this.num,
            'money': this.money,
            'buyer': this.buyer,
          }
          const res = await this.$Api.apiCart.postCart(prams)
          if(res.data.status==200)this.$Toast('加入购物车成功')
        } catch (error) {
          console.log(error)
        }
      }
    },
    // watch: {
    //   show: {
    //     handler(val) {
    //       this.sku.list[0].price = val.price * 100
    //       this.goods.picture = val.url
    //       this.productId = val.data.p_id
    //       this.productTitle = val.data.p_title
    //       this.imgUrl = val.data.imgsData[0].pro_img_url
    //       this.price = val.data.p_price_cur
    //       this.money = val.data.p_price_cur
    //       // console.log(val.data)
    //       // console.log(val.data.imgsData[0].pro_img_url)
    //     },
    //     deep: true
    //   }
    // },
    watch: {
      show: {
        handler(val) {
          this.sku.list[0].price = val.price * 100
        },
        deep: true
      }
    }
  }

</script>
<style lang="less">
</style>
